<template>
    <a-form ref="formRef" :model="model" :rules="rules" v-bind="formItemLayout">
        <a-row :gutter="10">
            <a-col :span="12">
                <a-form-item label="预审" name="prevAuditUser">
                    <a-select v-model:value="model.prevAuditUser" :options="auditUserOptions" :allowClear="true" placeholder="请选择预审人员"/>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="审批" name="auditUser">
                    <a-select v-model:value="model.auditUser" :options="auditUserOptions" :allowClear="true" placeholder="请选择适用体系" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="管理者代表审批" name="managerAudit">
                    <a-select v-model:value="model.managerAudit" :options="auditUserOptions" :allowClear="true" placeholder="请选择管理者代表审批人员"/>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="审批备注" name="auditremark">
                    <a-textarea v-model:value="model.auditremark"  placeholder="请输入审批备注"/>
                </a-form-item>
            </a-col>
        </a-row>
    </a-form>
</template>

<script lang='ts' setup>
    import { ref, computed } from 'vue';

    defineOptions({
        /** 审批人表单 */
        name: 'FileAuditForm',
    });
    
    const model = defineModel({
        type: Object, // 类型检查
        required: true, // 是否必填
        // 默认值
        default: {
            prevAuditUser: '', // 预审
            auditUser: '', // 审批
            managerAudit: '', //  管理者代表审批
            auditremark: '', // 审批备注
        }, 
    });

    const formRef = ref();

    const formItemLayout = ref({
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
    });
    
    const rules = ref({
        prevAuditUser: [{ required: true, message: '请选择预审人员', trigger: 'change' }],
        auditUser: [{ required: true, message: '请选择审批人员', trigger: 'change' }],
        managerAudit: [{ required: true, message: '请选择管理者代表审批人员', trigger: 'change' }],
    });

    const auditUserOptions = computed(() => {
        return [
            { label: 'admin_do/韩欣颖', value: 'admin_do' },
            { label: 'agalvan/Alejandro Galvan', value: 'agalvan' },
            { label: 'amendoza/Andrea Mendoza Puente', value: 'amendoza' },
            { label: 'asalazar8/Aldo Salazar', value: 'asalazar8' },
            { label: 'avalle3/Argel Del Valle ', value: 'avalle3' },
            { label:'bcasillas1/Brandon Alexis Trevino Casillas', value: 'bcasillas1' }
        ]
    });

    function validate() {
        return new Promise((resolve) => {
            formRef.value.validate().then((values) => {
                console.log('values', values);
                resolve({valid: true, values});
            })
            .catch(error => {
                console.log('error', error);
                resolve({valid: false, values: error?.values});
            });
        })
    }
    // 对外暴露属性方法
    defineExpose({
        validate,
    });
</script>

<style scoped lang="less">
</style>